<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>框架页面</title>
    <style type="text/css">
        #Layer1 {
            position: absolute;
            left: 0px;
            top: 0px;
            width: 100%;
            height: 150px;
            z-index: 1;
            background-color: #a7c3f1;
        }

        /*.flower{*/
        /*    top: 0px;*/
        /*    left: 0px;*/
        /*    width: 30%;*/
        /*    height: 50px;*/
        /*    z-index: 4;*/
        /*}*/

        .herder {
            text-align: center;
            vertical-align: middle;
            /*line-height: 80px;*/
        }

        #Layer2 {
            position: absolute;
            left: 0px;
            top: 180px;
            width: 20%;
            height: 100%;
            z-index: 2;
            background-color: #DEE8F2;
        }

        #Layer3 {
            position: absolute;
            left: 0px;
            top: 150px;
            width: 100%;
            height: 30px;
            z-index: 3;
            vertical-align: middle;
            text-align: center;
            background-color: rgba(73, 158, 241, 0.91);
        }

        #Layer4 {
            position: absolute;
            right: 0px;
            top: 180px;
            width: 20%;
            height: 100%;
            z-index: 2;
            background-color: #D1E5FE;
        }

        #Layer5 {
            position: absolute;
            left: 20%;
            top: 180px;
            width: 60%;
            height: 100%;
            z-index: 5;
        }

        .a {
            text-decoration: none; /*去<a herf>;下划线*/
        }

        .table {
            BORDER-RIGHT: white 0px solid; /* 显示右边框为1px，如果不想显示就为0px */
            border-top: 0px #fff solid; /* 显示上边框为1px，如果不想显示就为0px */
            BORDER-LEFT: #000000 0px solid; /* 显示左边框为1px，如果不想显示就为0px */
            BORDER-BOTTOM: #000000 0px solid; /* 显下右边框为1px，如果不想显示就为0px */
        }

        .content_left {
            padding-top: 50px;
            float: left;
        }

        .login {
            margin-bottom: 40px;
            margin-left: 50px;
        }

        .blue {
            color: #4680CB;
        }

        .main_title {
            color: #0E3E6F;
            height: 50px;
            width: 200px;
            background: #99C8FE;
            line-height: 50px;
            text-align: center;
        }
        .main_content{
            width: 99%;
            border: 2px solid #9BA5C7;
            height: 490px;
        }
        .posts{
            padding-top: 20px;
            margin-left: 30px;
        }
        .post_title{
            padding-top: 30px;
            color: #003E7A;
            text-decoration: underline;
        }
        .post_class{
            color: #74A5F4;
            margin-bottom: 10px;
        }
        .post_content{
            text-indent: 2em;
            margin-right: 20px;
        }
        .time_block{
            margin-bottom: 40px;
        }
        .time{
            color: white;
            text-align: center;
            margin-bottom: 5px;
        }
        .block_right{
            margin-bottom: 60px;
        }
        .title_right{
            color: #103E62;
            text-align: center;
            height: 35px;
            width: 100%;
            background: #7CC2DC;
            margin-bottom: 20px;
        }
        .center-right{
            text-decoration: none;
            height: 30px;
            line-height: 30px;
            color: #103E62;
            margin-left: 20px;
        }

    </style>
</head>
<body>
<div id="Layer1">
    <!--    <div class="flower">-->
    <!--    <span><img src="image/flower.jpg" width="100%" height="150"></span>-->
    <!--    </div>-->
    <div>&nbsp;</div>
    <div class="herder">
        <p><font size="6">BBS SMTH</font><br>
            <font size="1">Bulletin Board System , IT_Jay 水木清华站</font></p>
    </div>


</div>
<div id="Layer2">
    <div class="content_left">
        <div class="login">
            <input>
            <button>登陆</button>
            <input>
            <button>申请</button>
        </div>
        <ul>
            <li><a href="" class="a"><span class="blue">水木TV</span> </a></li>
            <li><a href="" class="a"><span class="blue">首页导读</span> </a></li>
            <li><a href="" class="a"><span class="blue">精华区 </span></a></li>
            <li><a href="" class="a"><span class="blue">分类讨论区</span> </a></li>
            <li><a href="" class="a"><span class="blue">搜索讨论区</span> </a></li>
            <li><a href="" class="a"><span class="blue">水木Blog</span> </a></li>
            <li><a href="" class="a"><span class="blue">谈天说地</span> </a></li>
            <li><a href="" class="a"><span class="blue">文件下载及登陆</span> </a></li>
            <li><a href="" class="a"><span class="blue">Telent登陆</span> </a></li>
        </ul>
    </div>
</div>


<div id="Layer4">
<div class="time_block">
<h3 class="time">2050年11月11日</h3>
<h3 class="time">星期八</h3>
</div>
    <div class="block_right">
        <div class="title_right">
            <h2>新开面板</h2>
        </div>
    </div>
    <div class="block_right">
        <div class="title_right">
            <h2>推荐面板</h2>
        </div>
        <p><a href="" class="center-right">新生·年轻·起飞</a></p>
        <p><a href="" class="center-right">BBS使用帮助</a></p>
        <p><a href="" class="center-right">站内原创推荐</a></p>
        <p><a href="" class="center-right">找工作Career</a></p>
        <p><a href="" class="center-right">鹊桥征友</a></p>
    </div>
</div>


<div id="Layer3">
    <div>
        <table class="table">
            <tr>
                <td width="10%" height=""><a href="" class="a">首页导读</a>
                <td width="10%" height=""><a href="" class="a">推荐面板</a>
                <td width="10%" height=""><a href="" class="a">推荐文章</a>
                <td width="10%" height=""><a href="" class="a">人气排名</a>
                <td width="10%" height=""><a href="" class="a">新讨论区</a>
                <td width="10%" height=""><a href="" class="a">休闲娱乐</a>
                <td width="10%" height=""><a href="" class="a">水木博客</a>
            </tr>
        </table>
    </div>
</div>


<div id="Layer5">
    <div class="main_title">
        <h2>推荐文章</h2>
    </div>
    <div class="main_content">
        <div class="posts">
            <h3 class="post_title">
                [原创]诸葛亮的人品和政治才能
            </h3>
            <p class="post_class">Sanguo·煮酒论英雄</p>
            <p class="post_content">近一两年中，常有人对诸葛亮的人品和能力提出怀疑，甚至不乏恶意的揣测，大有文革批孔之风。试做一文，希望达到让阅读者对这些歪论产生抗体的效果。</p>
            <p class="post_content">请先看此段《三国志·诸葛亮传》记载，这一段“成都有桑八百株”是很有名的：初，亮字表后主曰：“成都有桑八百株，薄田十五倾，子弟衣食，自由馀饶。至於臣在外任，无别调度，随身衣食，悉仰於官，不别治生，以长尺寸。若臣死之日，不是内有馀帛，外有赢财，以负陛下。”及卒，如其所言。</p>
            <p class="post_content">请先看此段《三国志·诸葛亮传》记载，这一段“成都有桑八百株”是很有名的：初，亮字表后主曰：“成都有桑八百株，薄田十五倾，子弟衣食，自由馀饶。至於臣在外任，无别调度，随身衣食，悉仰於官，不别治生，以长尺寸。若臣死之日，不是内有馀帛，外有赢财，以负陛下。”及卒，如其所言。</p>
            <p class="post_content">初，亮字表后主曰：“成都有桑八百株，薄田十五倾，子弟衣食，自由馀饶。至於臣在外任，无别调度，随身衣食，悉仰於官，不别治生，以长尺寸。若臣死之日，不是内有馀帛，外有赢财，以负陛下。”及卒，如其所言。</p>

            <h3 class="post_title">
                自序：轻语呢喃[小结随笔 之0]
            </h3>
        </div>
    </div>
</div>

</body>
</html>